<template>
  <view class="layout">
    <view class="navBar">
      <view class="statusBar" :style="{height: statusBarHeight + 'px'}"></view>
      <view class="titleBar f fac fpc" :style="{height: titleBarHeight + 'px'}">
		<view class="back" v-if="isBack" :style="{'left': windowWidth - right + 'px'}">
			<uni-icons type="back" size="24" style="font-weight: bold;"></uni-icons>
		</view>
		<view class="title">{{title}}</view>
      </view>
    </view>
    
    <!-- 占位符,不然导航栏会占据页面元素的内容 -->
    <view class="fill" :style="{height: navBarHeight + 'px'}"></view>
  </view>
</template>

<script setup>
import { ref } from "vue"
import { getStatusBarHeight, getTitleBarHeight, getNavBarHeight, SYSTEM_INFO } from "../utils/system.js"

defineProps({
  title: {
	type: String,
    default: ''
  },
  isBack: {
	type: Boolean,
	default: true
  }
})

let statusBarHeight = ref(getStatusBarHeight())
let titleBarHeight = ref(getTitleBarHeight())
let navBarHeight = getNavBarHeight()

// 屏幕宽度
const windowWidth = SYSTEM_INFO.windowWidth

const { height ,left, right, top } = uni.getMenuButtonBoundingClientRect()

</script>

<style lang="scss">
.layout {
  .navBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
	.titleBar {
		font-size: 28rpx;
		position: relative;
		.back {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
	}
  }
}
</style>